<template>
	<view class="cell">
		<view>
			<view class="status" v-if="data.timeType == 0">尖</view>
			<view class="fen" v-else-if="data.timeType == 1">峰</view>
			<view class="ping" v-else-if="data.timeType == 2">平</view>
			<view class="gu" v-else="data.timeType == 3">谷</view>
		</view>
		<view class="content">
			<view class="flex">
				<view>{{data.startTime}} - {{data.endTime}}</view>
				<view class="flag" v-if="data.isCurrent == 1">当前时段</view>
			</view>
			<view style="margin-top:10rpx;"><text style="color:#FA3534;font-size:42rpx;font-weight: bold;">{{data.totalMoney}}</text ><text style="color:#FA3534;font-size: 28rpx;margin-left:6rpx;">元/度</text></view>
			<view style="color: #909399;font-size:24rpx;margin-top:12rpx;">电费：{{data.amount}}元/度    服务费：{{data.serviceAmount}}元/度</view>
		</view>
	</view>
</template>

<script>
	export default{
		props:{
			data:{
				type:Object,
				default:{}
			}
		},
		data(){
			return{
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.cell{
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding:30rpx 30rpx;
	}
	.status{
		background-color: #FA3534;
		width:60rpx;
		height:60rpx;
		border-radius:6rpx;
		color:#FFFFFF;
		font-size:32rpx;
		line-height:60rpx;
		text-align: center;
		font-weight: bold;
	}
	.fen{
		background-color: #ffaa00;
		width:60rpx;
		height:60rpx;
		border-radius:6rpx;
		color:#FFFFFF;
		font-size:32rpx;
		line-height:60rpx;
		text-align: center;
		font-weight: bold;
	}
	.ping{
		background-color: #6ABF6C;
		width:60rpx;
		height:60rpx;
		border-radius:6rpx;
		color:#FFFFFF;
		font-size:32rpx;
		line-height:60rpx;
		text-align: center;
		font-weight: bold;
	}
	.gu{
		background-color: #00aa00;
		width:60rpx;
		height:60rpx;
		border-radius:6rpx;
		color:#FFFFFF;
		font-size:32rpx;
		line-height:60rpx;
		text-align: center;
		font-weight: bold;
	}
	.content{
		margin-left:60rpx;
	}
	.flex{
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	.flag{
		width:120rpx;
		height:30rpx;
		line-height:30rpx;
		text-align: center;
		border: solid 1rpx #6ABF6C;
		font-size:24rpx;
		margin-left:12rpx;
		color:#6ABF6C;
		border-radius:6rpx;
	}
</style>
